import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import type { DepartmentDto } from '@/api/system/types'
import renderModal, {
    getModelValue,
    initModelValue,
    type FormModalDto
} from '@/components/modal/Modal'
import { DepartmentTypeCnEnum, getKeyToEnum } from '@/const/enum'
import { getDeptDetail } from '@/api/system'
import type { AnyObject } from '@/types'
import type { AddType } from '@/api/types'

@Component
export class DialogAddDept extends Render {
    @Prop() show!: boolean
    @Prop({ default: true }) isRoot?: boolean
    @Prop({ default: 'add' }) type?: AddType
    @Prop() itemData?: DepartmentDto

    @Watch('show')
    async handleShow() {
        if (this.show) {
            this.addDeptFormConfig.show = true
            const addTypeName = this.type === 'add' ? '添加' : '编辑'
            this.addDeptFormConfig.title = this.isRoot ? '添加公司部门' : `${addTypeName}子组`
            if (this.show && this.itemData?.id && this.type === 'edit') {
                const res = await this.getDetail(this.itemData.id)
                // 后台数据库里存的类型是字符串，跟options里的类型不一致，需要转换一下
                res.leader && (res.leader = Number(res.leader))
                res.status && (res.status = Number(res.status))
                initModelValue(this.addDeptFormConfig, res)
            }
        }
    }

    @Emit('update:show')
    updateShow(val: boolean) {
        return val
    }

    @Emit('confirm')
    handleConfirm() {
        return {
            data: getModelValue(this.addDeptFormConfig),
            close: this.onCancel
        }
    }

    addDeptFormConfig = this.initAddDeptFormConfig() as FormModalDto
    initAddDeptFormConfig() {
        return {
            title: '',
            width: '400px',
            theme: 'light',
            show: false,
            items: {
                deptName: {
                    name: '部门名称',
                    element: 'input',
                    required: true
                },
                leader: {
                    name: '负责人',
                    element: 'select',
                    optionsType: 'saleList',
                    required: true
                },
                type: {
                    name: '部门类型',
                    element: 'select',
                    options: getKeyToEnum(DepartmentTypeCnEnum),
                    required: true
                },
                orderNum: {
                    name: '部门排序',
                    element: 'inputNumber',
                    required: true,
                    defaultValue: 1,
                    params: {
                        min: 1
                    }
                }
            },
            complete: async () => {
                this.handleConfirm()
            },
            cancel: () => {
                this.onCancel()
            },
            init: () => {
                // initModelValue(this.addDeptFormConfig)
            }
        } as FormModalDto
    }

    async getDetail(id: number) {
        return await getDeptDetail(id)
    }

    onCancel() {
        this.addDeptFormConfig.show = false
        this.updateShow(false)
    }
    render() {
        return <>{renderModal(this.addDeptFormConfig)}</>
    }
}

export default toNative<
    { isRoot?: boolean; type?: AddType; itemData?: DepartmentDto },
    { confirm: ({ data, close }: { data: AnyObject; close: () => void }) => void }
        >(DialogAddDept)
